<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线考试系统</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/dialog.css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href="../admin/css/magic-check.css" rel="stylesheet">
    <link href="../css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css">
    <script src="js/MyChart.js"></script>
    <script src="js/echarts.js"></script>
    <script src="../js/jquery-3.2.0.min.js"></script>
    <script src="../js/jquery-ui.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        var maxtime = 45 * 60 //1小时，按秒计算
        function CountDown() {
            if (maxtime >= 0) {
                minutes = Math.floor(maxtime / 60);
                seconds = Math.floor(maxtime % 60);
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                $('#kssj').html("剩余时间　" + minutes + "：" + seconds);
                --maxtime;
            }
            else {
                clearInterval(timer);
                submitKs();
            }
        }
        function submitKs() {
            //记录成绩值
            $("#ks").removeAttr("disabled");
            $("#yhxx").removeAttr("disabled");
            $("#xgmm").removeAttr("disabled");
            $("#logout").removeAttr("disabled");
            $("#tjcj").removeAttr("disabled");
            $("#questioncourse").removeAttr("disabled");
        }
        function ks() {
            $('#kssj').show();
            $('#init').show();
            $('#logimg').hide();
            timer = setInterval("CountDown()", 1000);
            CountDown();
            $("#ks").attr("disabled", "disabled");
            $("#yhxx").attr("disabled", "disabled");
            $("#xgmm").attr("disabled", "disabled");
            $("#logout").attr("disabled", "disabled");
            $("#tjcj").attr("disabled", "disabled");
            $("#questioncourse").attr("disabled", "disabled");
        }
        function gotoExam(i) {
            $('div[id*=sheet]').css('background-color', '#ffffff');
            $('#sheet' + i).css('background-color', '#93F0E4');
        }

        function modifypwd() {
            $('.theme-popover-mask').fadeIn(100);
            $('#modifypwd').slideDown(200);
        }

        function modifyInfo() {
            $('.theme-popover-mask').fadeIn(100);
            $('#modifyinfo').slideDown(200);
            $( "#birthday" ).val('rr0-03-10');
        }

        function ranklist() {
            $('.theme-popover-mask').fadeIn(100);
            $('#ranklist').slideDown(200);
            var legend = [""];//图例
            var title = "";//主标题
            var subtitle = "";//副标题
            var divID = "report";//div ID
            DrawStdLine(12, divID, legend, title, subtitle);
        }

        $(function ($) {
            $('.theme-poptit .close').click(function () {
                $('.theme-popover-mask').fadeOut(100);
                $('#modifyinfo').slideUp(200);
                $('#modifypwd').slideUp(200);
                $('#ranklist').slideUp(200);
            });
            $( "#birthday" ).datepicker();

        });
        //修改用户信息
        function saveUserInfo() {

        }
        //修改密码
        function modifyPass() {

        }

    </script>
</head>
<body>
<div class="container">
    <div id="top"></div>
    <div id="content">
        <div id="left_content">
            <div id="content_banner">考 生 信 息</div>
            <ul>
                <li>
                    姓名：<span id="userinfo">张三</span>
                </li>
                <li>性别：<span id="usersex">男</li>
                <li>出生日期：<span id="userbirth">2016-10-10</li>
                <li>联系电话：<span id="usertel">18933802786</li>
                <li>车型：小车</li>
                <li>考试科目：
                    <select name="questioncourse" id="questioncourse" class="form-control"
                            style="display:inline;height:34px;width:120px;font-size:14px;">
                        <option value="-1">-考试科目-</option>
                        <option value="1">科目一</option>
                        <option value="2">科目四</option>
                    </select>
                </li>
                <li>
                    <button id="yhxx" onclick="modifyInfo()" class="btn btn-success">用户信息</button>
                    <button id="xgmm" class="btn btn-success" onclick="modifypwd();">修改密码</button>
                </li>
                <li class="ks-info button">
                    <button id="ks" class="btn btn-success" onclick="ks();">模拟考试</button>
                    <button id="tjcj" class="btn btn-success" onclick="ranklist();">成绩排行</button>
                </li>
            </ul>
            <div id="kstime">
                <span id="kssj" style="display: none">剩余时间　45:00</span>
            </div>
        </div>
        <div id="right_content">
            <img id="logimg" src = "images/log.png" />
            <div id="init" style="display: none;">
                <div id="righttop">
                    <span id="question">如图所示，在高速公路最左侧车道行驶，想驶离高速公路，以下说法正确的是什么？</span>
                </div>
                <div id="rightcenter">
                    <div id="ksleft">
                        <ul>
                            <li><input class="magic-checkbox" type="radio" name="answerradio" id="r1">
                                <label id="choicea" for="r1">A、 每次变更一条车道，直到最右侧车道</label></li>
                            <li><input class="magic-checkbox" type="radio" name="answerradio" id="r2">
                                <label id="choiceb" for="r2">B、 为了快速变更车道，可以加速超越右侧车辆后变更车道</label></li>
                            <li><input class="magic-checkbox" type="radio" name="answerradio" id="r3">
                                <label id="choicec" for="r3">C、 找准机会一次变更到最右侧车道</label></li>
                            <li><input class="magic-checkbox" type="radio" name="answerradio" id="r4">
                                <label id="choiced" for="r4">D、 找准机会一次变更到最右侧车道</label></li>
                        </ul>
                    </div>
                    <div id="ksright">
                        <img id="questionimg" src="../upload/example.png"/>
                    </div>
                </div>
                <div id="ksbottom">
                    <button class="btn btn-info">上一题</button>
                    <button class="btn btn-info">下一题</button>
                    <button class="btn btn-warning">交卷</button>
                </div>
                <div id="ksanalysis" style="margin-top:30px;">
                    <p style="font-size:24px;margin-left:20px;">
                        最佳分析（<span id="ksanswer">答案 A</span>）
                    </p>
                    <p style="font-size:16px;margin-left:30px;">变更车道，每次只能变更一条车道，变更之后需行驶一段距离，再变道。不可以连续变更车道。</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div id="bottom">
        <fieldset>
            <legend>答题卡</legend>
            <script>
                for (i = 1; i <= 100; i++) {
                    if (i <= 100) {
                        document.write('<div id="sheet' + i + '" class="sheet" style="line-height:34px;" onclick="gotoExam(\'' + i + '\');"><b>' + i + '</b></div>');
                    } else {
                        document.write('<div id="sheet' + i + '" class="sheet" style="color:#AAAAAA;"><b>' + i + '</b></div>');
                    }
                }
            </script>
        </fieldset>
    </div>
</div>
<!-- 弹窗层 修改个人信息-->
<div class="theme-popover" id="modifyinfo">
    <div class="theme-poptit">
        <a href="javascript:;" title="关闭" class="close">×</a>
        <h3>修改个人信息</h3>
    </div>
    <div style="margin:0 auto;">
        <table class="theme-table">
            <tr>
                <td style="text-align: right;">手机：</td>
                <td style="text-align: left;">
                    <span style="margin-left:10px;">189218928918</span>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;width:40%;">
                    姓名：
                </td>
                <td style="text-align: left;">
                    <input type="text" style="display:inline;width:180px;margin-left:10px;" id="user" name="user"
                           maxlength="16" class="form-control"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">性别：</td>
                <td style="text-align: left;">
                    <select id="sex" name="sex" class="form-control"
                            style="width:100px;margin-left:10px;display:inline;">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">出生日期：</td>
                <td style="text-align: left;">
                    <input type="text" style="margin-left:10px;display:inline;width:180px;" id="birthday"
                           name="birthday" readonly="readonly" class="form-control"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">身份证号：</td>
                <td style="text-align: left;">
                    <input type="text" style="margin-left:10px;display:inline;width:180px;" maxlength="18" id="idcard"
                           name="idcard" class="form-control"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;">电子邮箱：</td>
                <td style="text-align: left;">
                    <input type="text" style="margin-left:10px;display:inline;width:180px;" id="email" name="email"
                           class="form-control"/>
                </td>
            </tr>
            <tr>
                <td style="text-align: center;" colspan="2">
                    <button class="btn btn-success" onclick="saveUserInfo();">提交</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<!-- 弹窗层 修改用户密码-->
<div class="theme-popover" id="modifypwd">
    <div class="theme-poptit">
        <a href="javascript:;" title="关闭" class="close">×</a>
        <h3>修改密码</h3>
    </div>
    <div style="margin:0 auto;">
        <table class="theme-table">
            <tr>
                <td style="text-align: right;">手机：</td>
                <td style="text-align: left;">
                    <span style="margin-left:10px;">189218928918</span>
                </td>
            </tr>
            <tr>
                <td style="text-align: right;width:40%;">
                    原始密码：
                </td>
                <td style="text-align: left;">
                    <input type="password" style="display:inline;width:180px;margin-left:10px;" id="pwd" name="pwd"
                           maxlength="16" class="form-control"/>
                </td>
            </tr>

            <tr>
                <td style="text-align: right;width:40%;">
                    新密码：
                </td>
                <td style="text-align: left;">
                    <input type="password" style="display:inline;width:180px;margin-left:10px;" id="newpwd"
                           name="newpwd" maxlength="16" class="form-control"/>
                </td>
            </tr>

            <tr>
                <td style="text-align: right;width:40%;">
                    确认密码：
                </td>
                <td style="text-align: left;">
                    <input type="password" style="display:inline;width:180px;margin-left:10px;" id="confirmpwd"
                           name="confirmpwd" maxlength="16" class="form-control"/>
                </td>
            </tr>

            <tr>
                <td style="text-align: center;" colspan="2">
                    <button class="btn btn-success" onclick="modifyPass();">提交</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<!-- 弹窗层 成绩排行-->
<div class="theme-popover" id="ranklist">
    <div class="theme-poptit">
        <a href="javascript:;" title="关闭" class="close">×</a>
        <h3>成绩排行</h3>
    </div>
    <div style="margin:0 auto;height:340px;width:100%" id="report">

    </div>
</div>
<div class="theme-popover-mask"></div>
</body>
</html>